<template>
  <div class="app">
    <h1>{{ msg }}，学生姓名：{{ studentName }}</h1>
    <!-- 
        通过父组件给子组件传递函数类型的props实现：子给父传递数据
     -->
    <SchoolInfo :getSchoolName="getSchoolName" />
    <hr />
    <!-- 
        通过父组件给子组件绑定一个自定义事件实现：子给父传递数据
            第一种写法：使用@或v-on:
     -->
    <!-- <StudentInfo @azhan="getStudentName" @demo="m1" /> -->
    <!-- 
            第二种写法：使用ref
                  挂载后五秒执行，则需要ref写法
     -->
    <StudentInfo ref="student" @click="show" />
    <!-- 
          若写@click="show"，被当做自定义事件
              需要写成
                  @click.native="show"
     -->
    <hr />
  </div>
</template>

<script>
import StudentInfo from "./components/StudentInfo.vue";
import SchoolInfo from "./components/SchoolInfo.vue";
// 引入顺序决定样式重名覆盖，使用后引入的

export default {
  name: "App",
  data() {
    return {
      msg: "你好啊",
      studentName: "",
    };
  },
  components: { StudentInfo, SchoolInfo },
  methods: {
    getSchoolName(name) {
      console.log("学校名：" + name);
    },
    getStudentName(name, ...params) {
      console.log("学生名：" + name, params);
      this.studentName = name;
    },
    m1() {
      console.log("demo事件被触发了");
    },
    show() {
      alert(123);
    },
  },
  mounted() {
    // 可以加setTimeout设置延迟触发
    this.$refs.student.$on("azhan", this.getStudentName); // 绑定自定义事件
    // this.$refs.student.$once("azhan", this.getStudentName);  // 绑定自定义事件，一次性
    /* 
        若在上面的函数中写this
              this.$refs.student.$once("azhan", function(name, ...params){
                console.log(this)
              })
            this是student对应的vc
            谁触发的该事件this就是谁
        若写成箭头函数就可以了
              this.$refs.student.$once("azhan", (name, ...params)=>{
                console.log(this)
              })
            this指向App组件实例对象
    */
  },
};
</script>
<style>
.app {
  background-color: gray;
  padding: 5px;
}
</style>
